<template>
  <el-card class="box-card" shadow="never">
    <div class="head-container">
      <div style="margin-left: 15px">
        <el-row>
          <svg t="1710468372537" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
               p-id="6034" data-spm-anchor-id="a313x.search_index.0.i1.6d973a810aYA7h" width="22" height="22" style="margin-top: 15px"><path d="M512 64A448 448 0 1 1 64 512 448 448 0 0 1 512 64m0-64a512 512 0 1 0 512 512A512 512 0 0 0 512 0z" p-id="6035" data-spm-anchor-id="a313x.search_index.0.i2.6d973a810aYA7h" class="selected" fill="#707070"></path><path d="M512 128a384 384 0 1 0 384 384 384 384 0 0 0-384-384z m192 352H544v64H704v64H544v128h-64v-128H320v-64h160v-64H320v-64h123.648l-106.624-128h83.328L512 397.952l91.648-109.952h83.328l-106.624 128H704z" p-id="6036" data-spm-anchor-id="a313x.search_index.0.i0.6d973a810aYA7h" class="selected" fill="#707070"></path></svg>
          <div style="margin-left: 8px">账户充值</div>
        </el-row>
      </div>
    </div>
    <div style="margin-top: 20px;">
      <div style="color: #909399; font-size: 15px">充值金额</div>
      <div class="total-layout">
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="total-frame" :style="{ borderColor: isSelected==6 ? '#76cb02' : '#DCDFE6' }">
              <el-button
                  class="price-tag" type="text"
                  :style="{ color: isSelected==6 ? '#76cb02' : '#909399' }"
                  @click="toggleSelection(6)">￥6.00</el-button>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="total-frame" :style="{ borderColor: isSelected==18 ? '#76cb02' : '#DCDFE6' }">
              <el-button
                  class="price-tag" type="text"
                  :style="{ color: isSelected==18 ? '#76cb02' : '#909399' }"
                  @click="toggleSelection(18)">￥18.00</el-button>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="total-frame" :style="{ borderColor: isSelected==68 ? '#76cb02' : '#DCDFE6' }">
              <el-button
                  class="price-tag" type="text"
                  :style="{ color: isSelected==68 ? '#76cb02' : '#909399' }"
                  @click="toggleSelection(68)">￥68.00</el-button>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="total-frame" :style="{ borderColor: isSelected==233 ? '#76cb02' : '#DCDFE6' }">
              <el-button
                  class="price-tag" type="text"
                  :style="{ color: isSelected==233 ? '#76cb02' : '#909399' }"
                  @click="toggleSelection(233)">￥233.00</el-button>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-top: 20px">
          <el-col :span="6">
            <div class="total-frame" :style="{ borderColor: isSelected==648 ? '#76cb02' : '#DCDFE6' }">
              <el-button
                  class="price-tag" type="text"
                  :style="{ color: isSelected==648 ? '#76cb02' : '#909399' }"
                  @click="toggleSelection(648)">￥648.00</el-button>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="total-frame" :style="{ borderColor: isSelected==998 ? '#76cb02' : '#DCDFE6' }">
              <el-button
                  class="price-tag" type="text"
                  :style="{ color: isSelected==998 ? '#76cb02' : '#909399' }"
                  @click="toggleSelection(998)">￥998.00</el-button>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="custom-frame" :style="{ borderColor: isSelected==7 ? '#76cb02' : '#DCDFE6' }">
              <el-button v-if="isInput==0"
                  type="text" size="large"
                  :style="{ color: isSelected==7 ? '#76cb02' : '#909399' }"
                  @click="toggleSelection(7)">自定义金额</el-button>
              <div v-if="isInput==1">
                <el-input size="large" v-model="inputValue"></el-input>
                <span style="color: #909399; font-size: 14px; margin-top: 10px">请输入金额</span>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div  style="margin-top: 15px">
      <el-row :gutter="20">
        <el-col :span="7"></el-col>
        <el-col :span="5" >
          <!--二维码生成-->
          <vue-qr :text="qr" :size="185" :margin="10" :correctLevel="0" :whiteMargin="false" :logoSrc="src2"></vue-qr>
          <span id="dialogSpan" v-show="paySucc == true"></span>
          <span id="dialogSpan2" v-show="paySucc == true">
            <i class="el-icon-success" style="background-color: #FFFFFF; color:#67C23A; font-size: 60px;border-radius: 30px;"/>
            <br/>
            支付成功
          </span>
        </el-col>
        <el-col :span="6">
          <el-row>
            <div style="margin-left: 5px; display: inline-block;">
              <span style="color: #76cb02; font-size: 30px; margin-top: 10px" v-if="totalAmount">{{totalAmount}}.00</span>
              <span style="color: #76cb02; font-size: 30px; margin-top: 10px" v-if="isSelected==7 && inputValue">{{inputValue}}.00</span>
              <span style="color: #76cb02; font-size: 30px; margin-top: 10px" v-if="isSelected==7 && !inputValue">00.00</span>
              <span style="color: #76cb02; font-size: 30px; margin-top: 10px" v-if="!totalAmount && isSelected!=7">00.00</span>
            </div>
          </el-row>
          <el-row>
            <span style="color: #909399; font-size: 15px; margin-top: 10px">请点击按钮扫码支付</span>
          </el-row>
          <el-row>
            <svg t="1710597562662" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" style="margin-top: 10px"
                 p-id="4236" width="32" height="32"><path d="M902.095 652.871l-250.96-84.392s19.287-28.87 39.874-85.472c20.59-56.606 23.539-87.689 23.539-87.689l-162.454-1.339v-55.487l196.739-1.387v-39.227H552.055v-89.29h-96.358v89.294H272.133v39.227l183.564-1.304v59.513h-147.24v31.079h303.064s-3.337 25.223-14.955 56.606c-11.615 31.38-23.58 58.862-23.58 58.862s-142.3-49.804-217.285-49.804c-74.985 0-166.182 30.123-175.024 117.55-8.8 87.383 42.481 134.716 114.728 152.139 72.256 17.513 138.962-0.173 197.04-28.607 58.087-28.391 115.081-92.933 115.081-92.933l292.486 142.041c-11.932 69.3-72.067 119.914-142.387 119.844H266.37c-79.714 0.078-144.392-64.483-144.466-144.194V266.374c-0.074-79.72 64.493-144.399 144.205-144.47h491.519c79.714-0.073 144.396 64.49 144.466 144.203v386.764z m-365.76-48.895s-91.302 115.262-198.879 115.262c-107.623 0-130.218-54.767-130.218-94.155 0-39.34 22.373-82.144 113.943-88.333 91.519-6.18 215.2 67.226 215.2 67.226h-0.047z" fill="#02A9F1" p-id="4237"></path></svg>
          </el-row>
          <el-row>
            <span style="color: #909399; font-size: 15px; margin-top: 10px">使用支付宝</span>
          </el-row>
          <el-row>
            <el-button @click="toPayment" type="primary" style="margin-left: 5px;margin-top: 10px">去支付</el-button>
          </el-row>
        </el-col>
      </el-row>
    </div>
    <el-dialog
        title="支付成功"
        width="30%"
        v-model="paySucc">
        <span style="font-size: 17px;">
          <el-icon><CircleCheckFilled /></el-icon> 恭喜你，成功充值{{ this.totalAmount }}元
        </span>
    </el-dialog>
    <!--
    <div id="orderDiv">
      <el-button @click="toPayment" type="primary">去支付</el-button>
      <el-dialog
          title="支付宝扫码支付"
          v-model="dialogVisible">
    <vue-qr :text="qr" :size="200" :margin="10" :correctLevel="0" :whiteMargin="false"></vue-qr>
    <span id="dialogSpan" v-show="paySucc == true"></span>
    <span id="dialogSpan2" v-show="paySucc == true">
        <i class="el-icon-success" style="background-color: #FFFFFF; color:#67C23A; font-size: 60px;border-radius: 30px;"/>
        <br/>
        支付成功
      </span>

    </el-dialog>
    </div>
    -->

  </el-card>
</template>
<script>
import vueQr from 'vue-qr/src/packages/vue-qr.vue'
import axios from 'axios'
import defaultAvatar from '@/assets/logo2.png';
export default {
  components: {vueQr},
  data() {
    return {
      isSelected: 0,
      isInput:0,
      inputValue:'',
      dialogVisible: false,
      qr: "",
      paySucc: false,
      totalAmount:"00",
      src2: defaultAvatar
    };
  },
  methods: {
    toggleSelection(data) {
      this.isSelected = data;
      if(this.isSelected==7) {
        this.isInput=1;
        this.totalAmount=this.inputValue;
      }
      else this.isInput=0;
      this.setTotalAmount();
    },
    setTotalAmount(){
      if(this.isSelected==7) this.totalAmount=this.inputValue;
      else this.totalAmount=this.isSelected;
    },
    toPayment(){
      let _this = this;
      this.setTotalAmount();
      // 这里填写后台支付的地址
      axios({
        method: 'POST',
        url: `/adWallet/sandboxPay/${encodeURIComponent(this.totalAmount)}`, // 使用模板字符串和 encodeURIComponent 编码金额以适应 URL 路径
      }).then(res => {
        // 处理响应...
        console.log("调用沙盒接口返回结果",res);
        this.qr = res.data.qrCode;

        if ("WebSocket" in window) {
          // 打开一个 web socket
          // 通道地址按照项目进行配置
          var ws = new WebSocket("ws://localhost:8080/websocket");
          ws.onopen = function() {
            // Web Socket 已连接上，使用 send() 方法发送数据
            // ws.send("data");
            // alert("数据发送中...");
          };
          ws.onmessage = function(evt) {
           // var received_msg = evt.data;
            // 接收后台推送的数据
           // alert("数据已接收..." + evt.data);
            console.log("数据已接收..." + evt)
            if (evt.data) {
              _this.paySucc = true;
              setTimeout(() => {
                _this.paySucc = false;
              }, 3 * 1000);
            }
            ws.close();
          };
          ws.onclose = function() {

          };
        } else {
          console.log("调用WebSocket失败！")
          alert("您的浏览器不支持 WebSocket!");
        }
      });
     // this.dialogVisible = true;
    }
  }

};
</script>

<style scoped lang="scss">
@import "@/theme/commonCard.css";
.total-frame {
  border: 1px solid #DCDFE6;
  padding: 20px;
  height: 60px;
  border-radius: 5px; /* 设置边框圆角为 10px */
  display: flex;
  align-items: center;
  justify-content: center;
}

.price-tag {
  font-size: 30px;
  padding-right: 5px;
}

.custom-frame {
  border: 1px solid #DCDFE6;
  padding: 20px;
  height: 60px;
  border-radius: 5px; /* 设置边框圆角为 10px */
  display: flex;
  align-items: center;
}

.qr-container {
  display: flex;
  justify-content: center;
}

#dialogSpan{
  display: inline-block;
  width: 200px;
  height: 200px;
  position: absolute;
  top: 80px;
  right: 27px;
  opacity:0.9;
  background-color: #FFFFFF;
}
#dialogSpan2{
  display: inline-block;
  width: 100px;
  height: 100px;
  position: absolute;
  top: 124px;
  right: 80px;
  font-size: 20px;
  text-align: center;
}
//主要是加上  ::v-deep

::v-deep .el-dialog {
  --el-bg-color: #f0f9eb !important;
}

//弹框头部
::v-deep .el-dialog__header {
  --el-text-color-primary: #67c23a;
  --el-text-color-regular: #fff;
  padding: 0 !important;
  width: 100%;
  height: 64px;
  background: linear-gradient(90deg, #f0f9eb 0%, rgb(240, 249, 235) 100%);
}
//弹框标题
::v-deep .el-dialog__title {
  margin-left: 24px;
  line-height: 64px;
}
//弹框内容部分
::v-deep .el-dialog__body {
  --el-bg-color: #67c23a !important;
  --el-text-color-regular: #67c23a;
}
</style>